<template>
	<view class="content">
		<view class="tabList">
			<text :class="suo == index?'active':''" @click="changeTab(index)" v-for="(item,index) in tabList" :key="index">{{item}}</text>
		</view>
		
		<view class="baseInfo" v-if="suo === 0">
			<view class="detailWrap">
				<view class="wrap-title">
					位置信息
				</view>
				<view class="wrapTxt">
					<text>楼号</text>{{deviceInfo.roomNo}}
				</view>
				<view class="wrapTxt">
					<text>楼层</text>{{deviceInfo.floor}}
				</view>
				<view class="wrapTxt">
					<text>房间名称</text>{{deviceInfo.roomName}}
				</view>
			</view>	
			
			<view class="detailWrap">
				<view class="wrap-title">
					设备信息
				</view>
				<view class="wrapTxt">
					<text>设备名称</text>{{deviceInfo.deviceName}}
				</view>
				<view class="wrapTxt">
					<text>品牌</text>{{deviceInfo.brand}}
				</view>
				<view class="wrapTxt">
					<text>功率</text>{{deviceInfo.devicePower == null?'':deviceInfo.devicePower}}
				</view>
				<view class="wrapTxt">
					<text>机型</text>{{deviceInfo.model== null?'':deviceInfo.model}}
				</view>
				<view class="wrapTxt">
					<text>数量</text>{{deviceInfo.quantity}}
				</view>
				<view class="wrapTxt">
					<text>出厂日期</text>{{deviceInfo.manufactureDate}}
				</view>
				<view class="wrapTxt">
					<text>机器编号</text>{{deviceInfo.deviceCode}}
				</view>
			</view>	
			
			<view class="detailWrap">
				<view class="wrap-title">
					备注
				</view>
				<view class="wrapTxt">
					{{deviceInfo.remark}}
				</view>
			</view>	
			
			<view class="detailWrap">
				<view class="wrap-title">
					设备二维码 
				</view>
				<view class="ewmBox" style="z-index: 1;">
					<canvas canvas-id="qrcode" v-if="!qr_code" style="width: 286rpx;height:286rpx;overflow: hidden;z-index: 1;"/>
					<image v-else :src="qr_code" mode="widthFix" style="width: 286rpx;height:286rpx;"></image>
				</view>
			</view>
			
			<view class="twoBotom" style="z-index: 9999;" v-if="suo === 0">
				<view class="twoBtn" style="z-index: 9999;" @click="goRepair">
					我要报修
				</view>
			</view>
			
		</view>
			
		<view class="xunBox" v-if="suo === 1">
			<view class="xunli" v-for="(item,index) in xunList" :key="index">
				<view class="xunImg">
					<image src="../../static/xun.png" mode=""></image>
				</view>
				<view class="xunInfo">
					<view class="xunTime">
						巡检时间：2025/01/02 14:20
					</view>
					<view class="xunPerson">
						巡检人：张三
					</view>
				</view>
				<view class="detailBtn">
					<image src="../../static/detailBtn.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="serviceBox" v-if="suo == 2">
			<view class="fuli" v-for="(item,index) in orderList" :key="index">
				<view class="fuTxt">
					工单编号：{{item.orderNo}}
				</view>
				<view class="fuInfo">
					<text>工单类型：</text>{{item.serviceType | typeFmt}}
				</view>
				<view class="fuInfo">
					<text>申请人：</text>{{item.submitUser == null?'':item.submitUser}}
				</view>
				<view class="fuInfo">
					<text>申请时间：</text>{{item.submitTime== null?'':item.submitTime}}
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uQRCode from '../../util/ucode.js';
	import { getDeviceDetail, getRecentSevenDays, getRecentSevenDaysByDevice } from '@/api/login.js';
	export default {
		data() {
			return {
				tabList: ['基本信息','巡检信息','服务记录'],
				suo: 0,
				dId: '',
				qr_code: '',
				deviceInfo:{},
				xunList: [],
				orderList: []
			}
		},
		filters:{
			typeFmt(val) {
				if(val == 0) {
					return '安装';
				} else if(val == 1){
					return '维修';
				} else if(val == 2){
					return '保养';
				} else if(val == 3){
					return '巡检';
				}
			}
		},
		onLoad(opt) {
			this.dId = opt.idd;
			this.getInfo(opt.idd);
		},
		methods: {
			goRepair(){
				uni.navigateTo({
					url: '/pages/index/service?idd=0'
				});
			},
			createQRCode(txtt) {
				let that = this;
			     uQRCode.make({
			     	canvasId: 'qrcode',
			     	componentInstance: that,
			     	text: txtt,
			     	size: 140,
			     	margin: 10,
			     	backgroundColor: '#ffffff',
			     	foregroundColor: '#000000',
			     	fileType: 'jpg',
			     	errorCorrectLevel: uQRCode.errorCorrectLevel.H,
			     	success: res => {
						that.qr_code = res;
					}
			     })
			},
			getInfo(idd){
				getDeviceDetail({id:idd}).then(res=>{
					if(res.code == 200) {
						this.deviceInfo = res.data;
						this.$nextTick(()=>{
							this.createQRCode(res.data.qrCode);
						})
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			changeTab(index){
				this.suo = index;
				if(index == 1) {
					getRecentSevenDaysByDevice({deviceId:this.dId}).then(res=>{
						if(res.code == 200) {
							this.xunList = res.rows;
						} else {
							uni.$u.toast(res.msg);
						}
					});
				} else if(index == 2){
					getRecentSevenDays({deviceId:this.dId}).then(res=>{
						if(res.code == 200) {
							this.orderList = res.rows;
						} else {
							uni.$u.toast(res.msg);
						}
					});
				} else if(index == 0) {
					this.getInfo(this.dId);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	background-color:#E8EFFF;padding:0 24rpx 180rpx;
	.serviceBox{
		.fuli{
			background-color:#fff;border-radius:12rpx;margin-bottom:16rpx;padding:32rpx;
			.fuTxt{
				@include baseFont(28rpx,#333,40rpx);font-weight:500;margin-bottom:12rpx;
			}
			.fuInfo{
				@include baseFont(28rpx,#333,36rpx);margin-bottom:12rpx;@include flx;
				text{
					color:#878787;display: block;width:146rpx;
				}
			}
			.fuInfo:last-of-type{
				margin-bottom:0;
			}
		}
	}
	.xunBox{
		.xunli{
			background-color:#fff;height:148rpx;border-radius:12rpx;@include flx;margin-bottom:16rpx;align-items: center;
			padding:0 32rpx;position: relative;
			.detailBtn{
				position: absolute;right:32rpx;top:50%;transform: translateY(-50%);
				image{
					width:49rpx;height:48rpx;display: block;
				}
			}
			.xunImg{
				image{
					display: block;width:80rpx;height:80rpx;
				}
			}
			.xunInfo{
				margin-left:24rpx;
				.xunTime{
					@include baseFont(28rpx,#333,40rpx);margin-bottom:8rpx;
				}
				.xunPerson{
					@include baseFont(26rpx,#666,36rpx);
				}
			}
		}
	}
	.detailWrap{
		background-color:#fff;border-radius:12rpx;padding:24rpx 32rpx;margin-bottom:16rpx;
		.wrap-title{
			@include baseFont(28rpx,#000,44rpx);font-weight:500;margin-bottom:12rpx;
		}
		.ewmBox{
			padding-bottom:24rpx;width:312rpx;height:312rpx;background: url('../../static/ewmBg.png') no-repeat;
			background-size:312rpx;margin:0 auto;display: flex;justify-content: center;align-items: center;
			image{
				display: block;
			}
			canvas{
				display: flex;justify-content: center;align-items: center;
			}
		}
		.wrapTxt{
			@include baseFont(28rpx,#333,40rpx);margin-bottom:12rpx;@include flx;flex-wrap: nowrap;align-items: flex-start;
			text{
				color:#666;display: block;width:160rpx;
			}
			label{
				display: block;
			}
		}
	}
	.tabList{
		@include flx;justify-content: space-between;padding:32rpx 66rpx 20rpx;
		text{
			display: block;@include baseFont(32rpx,#333,44rpx);padding-bottom:18rpx;position: relative;
		}
		.active{
			color:#3671E9;
		}
		.active::after{
			content:'';width:52rpx;height:6rpx;background-color:#3671E9;border-radius:3rpx;
			position: absolute;bottom:0;left:50%;transform: translateX(-50%);
		}
	}
}
</style>
